/********** @name: 视频上传组件 @describtion: 可以选择素材库视频或者本地上传视频作为视频地址 props: * update:showDialog: 控制显示与关闭弹框 * limit: 限制输出视频数量 emit: * getVideo: 确认选择的回调
@author:liubingye @date:2023-03-01 09:15:25 ***********/
<template>
  <div class="ruifox-image-upload">
    <el-dialog v-model="showDialog" @close="handleClose" title="视频上传" width="960px" class="axupimg-box">
      <div class="inner-axupimg-box">
        <div class="axupimg-upload-box">
          <div class="local-upload">
            <div class="upload-demo">
              <div class="upload-btn-box">
                <el-button type="primary" @click="handleLocalUpload">本地上传</el-button>
                <el-button @click="handleMaterial" v-show="false">从资料库选择</el-button>
                <!--                <el-button @click="handleInt">添加网络文件</el-button>-->
              </div>
              <div class="local-upload-list-out">
                <el-scrollbar height="400px" v-show="videoUploadList.length > 0">
                  <draggable :list="videoUploadList" animation="180" item-key="uid" :force-fallback="true" filter=".unmover" class="local-upload-list">
                    <template #item="{ element }">
                      <div>
                        <li>
                          <div class="img-box">
                            <img :src="element.thumb" alt="" />
                          </div>
                          <div class="progress-box" v-show="element.percentage !== 100">
                            <el-progress :percentage="element.percentage" :status="element.status === 'success' ? 'success' : ''" :stroke-width="20" :text-inside="true" />
                          </div>
                          <div class="remove-upload unmover" @click.stop="removeUpload(element.uid)">
                            <el-icon><Delete /></el-icon>
                          </div>
                          <div class="play-button-box unmover" @click.stop="handlePlayVideo(element)">
                            <i class="iconfont">&#xea82;</i>
                          </div>
                        </li>
                        <p class="img-name">{{ element.name ? element.name : '网络视频' + element.uid }}</p>
                      </div>
                    </template>
                  </draggable>
                </el-scrollbar>
                <div class="no-upload-list" v-show="videoUploadList.length === 0">
                  <p>暂未上传视频，请点击“本地上传”或选择其他上传方式</p>
                </div>
              </div>
            </div>
          </div>
          <el-dialog v-model="previewVideo" width="960px" title="预览视频" destroy-on-close>
            <div class="video-preview">
              <videoPlay
                v-bind="videoOptions"
                @contextmenu="
                  () => {
                    return false
                  }
                "
              ></videoPlay>
            </div>
          </el-dialog>
          <el-dialog v-model="materialShow" width="960px" title="从资源库选择" @close="handleMaterialClose">
            <div class="online-upload">
              <div class="material-choose-box">
                <!--                <div class="btn" :class="{'is-active': thisLib === 1}" @click="changeLibrary(1)">个人资源库</div>-->
                <div class="btn" :class="{ 'is-active': thisLib === 2 }">公共资源库</div>
              </div>
              <div class="online-upload-list-outer">
                <div class="online-upload-list">
                  <div class="online-upload-item" :class="{ 'is-choose': choseVideoList.find(a => a.id === item.id) }" v-for="item in materialVideos" :key="item.id" @click="toggleChooseOnline(item)">
                    <img :src="item.thumb" alt="" />
                    <div class="upload-item-checkbox">
                      <el-icon><Check /></el-icon>
                    </div>
                  </div>
                </div>
                <PaginationViewSimple :total="materialQuery.total" :pageSize="materialQuery.pageSize" :currentPage="materialQuery.currentPage" @currentChange="handleMaterialCurrentChange" />
              </div>
              <div class="chose-img">
                <div class="chose-img-title">
                  <p>从资源库中选择视频</p>
                  <p>
                    已选：
                    <span>{{ choseVideoList.length }}</span>
                    张
                  </p>
                </div>
                <div class="material-chose-list">
                  <div style="height: 120px">
                    <el-scrollbar height="120px">
                      <div class="inner-material-chose-list">
                        <li class="material-chose-list-item" v-for="item in choseVideoList" :key="item.id">
                          <img :src="item.thumb" alt="" />
                          <div class="remove-btn" @click.stop="removeChose(item.id)">
                            <el-icon><Delete /></el-icon>
                          </div>
                        </li>
                      </div>
                    </el-scrollbar>
                  </div>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="addMaterialImg">确认</el-button>
                <el-button @click="materialShow = false">取消</el-button>
              </span>
            </template>
          </el-dialog>
          <el-dialog v-model="interShow" width="960px" title="添加网络视频" @close="handleInterClose" align-center>
            <div class="inter-upload">
              <p class="inter-upload-tips">网络图片可能受到版权保护，使用未经授权的他人作品存在侵权行为，请慎重添加：</p>
              <el-input v-model="interUrls" :rows="4" type="textarea" placeholder="填写网络链接地址，若有多个链接，请用“回车”键进行换行" />
              <el-button type="primary" :disabled="interUrls === ''" style="margin-top: 10px" @click="handleAddInterImg">添加</el-button>
              <el-button style="margin-top: 10px" @click="handleClearInter">清空</el-button>
              <div class="inter-upload-list" v-if="interImages.length > 0">
                <div class="inter-upload-list-title">
                  <p class="title-left">图片列表</p>
                  <p class="title-right">
                    已添加:
                    <span class="primary-num">{{ interImagesChecked.length }}</span>
                    /
                    <span>{{ limit - videoUploadList.length }}</span>
                    个文件
                  </p>
                </div>
                <div class="inner-inter-upload-list">
                  <el-scrollbar max-height="300px">
                    <li v-for="(item, index) in interImages" :key="item.uid">
                      <el-checkbox v-model="item.checked" style="margin-right: 10px" :disabled="item.status === 0" @change="handleCheckInter(item)"></el-checkbox>
                      <div class="image-box">
                        <img :src="item.thumb" alt="" />
                      </div>
                      <p class="url" :class="{ 'url-warning': item.status === 0 }">{{ item.url }}</p>
                      <el-icon v-if="item.status === 1" class="success"><CircleCheckFilled /></el-icon>
                      <el-tooltip v-if="item.status === 0" effect="light" content="未获取到网络图片" placement="bottom">
                        <el-icon class="warning"><WarningFilled /></el-icon>
                      </el-tooltip>
                      <a href="javascript:;" class="delete-btn" @click="handleDeleteInter(index)">
                        <el-icon><Delete /></el-icon>
                      </a>
                    </li>
                  </el-scrollbar>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button type="primary" @click="submitInsertInterImage()">确认</el-button>
                <el-button @click="interShow = false">取消</el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="insertImage">确认</el-button>
          <el-button @click="closeDialog">取消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 本地上传弹窗 -->
    <VideoLocalUpload v-model:show="localUploadShow" @uploadCallback="uploadCallback" />
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive, watch, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { checkVideos, getVideoPage } from '@/api/content'
import { Delete, Check, CircleCheckFilled, WarningFilled } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'
import { useStore } from 'vuex'

const store = useStore()
const props = defineProps({
  //打开dialog
  showDialog: {
    type: Boolean,
    default: false
  },
  limit: {
    type: Number,
    default: 15
  },
  allow: {
    type: String,
    default: 'image/png, image/jpeg'
  },
  insertFun: {
    type: String,
    default: 'insertVideo'
  }
})
const showDialog = ref(props.showDialog)
const limit = ref(props.limit)
watch(
  props,
  newVal => {
    showDialog.value = newVal.showDialog
  },
  { deep: true }
)
const emit = defineEmits(['update:showDialog', 'getVideo'])
const handleClose = () => {
  emit('update:showDialog', false)
  // 清空
  videoUploadList.value = []
}
const closeDialog = () => {
  emit('update:showDialog', false)
}
const defaultMaterialQuery = {
  currentPage: 1,
  pageSize: 10,
  total: 0
}
const materialQuery = reactive(Object.assign({}, defaultMaterialQuery))
const choseVideoList = ref([])
const videoUploadList = ref([])
const materialShow = ref(false)
const materialVideos = ref([])
const handleMaterial = () => {
  materialShow.value = true
  handleGetFileList()
}
const handleGetFileList = () => {
  getVideoPage(materialQuery).then(res => {
    materialVideos.value = res.data.list
    materialQuery.total = res.data.total
  })
}
const handleMaterialCurrentChange = page => {
  materialQuery.currentPage = page
  handleGetFileList()
}

const localUploadShow = ref(false)
const handleLocalUpload = () => {
  localUploadShow.value = true
}
const uploadCallback = (data) => {
  videoUploadList.value.push(data)
}
// 添加网络文件
const interUrls = ref('')
const handleClearInter = () => {
  interUrls.value = ''
}
// 链接生成图片列表
const handleAddInterImg = () => {
  checkVideos({ urls: interUrls.value }).then(res => {
    let _images = res.data.map((item, index) => {
      let _item = {
        url: item.url,
        uid: Date.now() + index,
        percentage: 100,
        status: 'success',
        thumb: item.thumb
      }
      return _item
    })
    interImages.value = interImages.value.concat(_images)
    // 更新勾选
    let num = 0
    interImages.value = interImages.value.map(item => {
      if (num < limit.value - videoUploadList.value.length && item.status === 1) {
        item.checked = true
        num++
      } else {
        item.checked = false
      }
      return item
    })
    handleClearInter()
  })
}
const interImages = ref([])
const interImagesChecked = computed(() => {
  return interImages.value.filter(item => {
    return item.checked
  })
})
const handleCheckInter = data => {
  if (data.checked && interImagesChecked.value.length > limit.value - videoUploadList.value.length) {
    data.checked = !data.checked
    ElMessage({
      showClose: true,
      message: '当前只允许添加' + (limit.value - videoUploadList.value.length) + '个网络视频',
      type: 'warning'
    })
  }
}
const interShow = ref(false)
// eslint-disable-next-line no-unused-vars
const handleInt = () => {
  interShow.value = true
}
const handleDeleteInter = index => {
  interImages.value.splice(index, 1)
}

const submitInsertInterImage = () => {
  videoUploadList.value = videoUploadList.value.concat(interImagesChecked.value)
  interShow.value = false
}

const handleInterClose = () => {
  interImages.value = []
}

// 资源库切换
const thisLib = ref(2)
// const changeLibrary = (id) => {
//   thisLib.value = id
//   getVideoMaterial({id}).then(res => {
//     materialVideos.value = res.data
//   })
// }
// 资源库图片添加
const addMaterialImg = () => {
  videoUploadList.value = videoUploadList.value.concat(choseVideoList.value)
  materialShow.value = false
}
// 关闭资源库弹框触发
const handleMaterialClose = () => {
  choseVideoList.value = []
}
const removeUpload = id => {
  videoUploadList.value = videoUploadList.value.filter(item => item.uid !== id)
}
const previewVideo = ref(false)
const handlePlayVideo = data => {
  videoOptions.color = store.state.base.themeColor
  videoOptions.title = data.name
  videoOptions.src = data.url
  videoOptions.poster = data.thumb
  previewVideo.value = true
}
const removeChose = id => {
  choseVideoList.value = choseVideoList.value.filter(item => item.id !== id)
}
const toggleChooseOnline = item => {
  if (choseVideoList.value.find(a => a.id === item.id)) {
    choseVideoList.value = choseVideoList.value.filter(a => a.id !== item.id)
  } else {
    if (choseVideoList.value.length < limit.value - videoUploadList.value.length) {
      item.percentage = 100
      item.uid = item.id
      choseVideoList.value.push(item)
    } else {
      return
    }
  }
}
const insertImage = () => {
  let _videoList = videoUploadList.value.map(item => {
    let _item = {
      id: item.id,
      url: item.url,
      name: item.name,
      thumb: item.thumb
    }
    return _item
  })
  emit('getVideo', _videoList)
  choseVideoList.value = []
  emit('update:showDialog', false)
}
const videoOptions = reactive({
  width: '900px',
  height: '600px',
  color: '#409eff', //主题色
  title: '', //视频名称
  webFullScreen: false, //网页全屏
  speed: true, //是否支持快进快退
  currentTime: 0, //跳转到固定播放时间(s)
  muted: false, //静音
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  control: true, //是否显示控制器
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量0-1
  src: '', //视频源
  poster: '', //封面
  speedRate: [1.0, 1.25, 1.5, 2.0], // 可选的播放速度
  controlBtns: [
    'audioTrack', //音轨切换按钮
    'quality', //视频质量切换按钮
    'speedRate', //速率切换按钮
    'volume', //音量
    'setting', //设置
    'pip', //画中画按钮
    'fullScreen' //全屏按钮
  ]
})
</script>

<style scoped lang="scss">
::v-deep(.axupimg-box .el-dialog__body) {
  padding: 0;
}
::v-deep(.el-tabs--top .el-tabs__item.is-top:nth-child(2)) {
  padding-left: 20px;
}
.axupimg-box {
  .inner-axupimg-box {
    display: flex;
    height: 480px;
    .axupimg-upload-box {
      height: 100%;
      width: 100%;
      .local-upload {
        padding: 20px;
        .upload-btn-box {
          margin-bottom: 10px;
        }
        .local-upload-list-out {
          height: 400px;
          border: 1px solid $borderColor;
          .no-upload-list {
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            p {
              color: #aaaaaa;
              font-size: 14px;
            }
          }
        }
        .local-upload-list {
          height: 400px;
          display: flex;
          flex-wrap: wrap;
          position: relative;
          align-content: flex-start;
          & > div {
            height: 160px;
            width: 160px;
            margin-right: 20px;
            margin-top: 20px;
            background-color: #f8f8f8;
          }
          .img-name {
            font-size: 12px;
            @include textEllipsis(24px, 1);
            color: #000;
            text-align: center;
          }
          & > div:nth-child(5n + 1) {
            margin-left: 18px;
          }
          li {
            transition: all 0.3s;
            height: 160px;
            width: 160px;
            box-sizing: border-box;
            list-style: none;
            border: 1px solid #e4e4e4;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            .img-box {
              height: 158px;
              width: 158px;
              display: flex;
              justify-content: center;
              align-items: center;
              img {
                max-width: 158px;
                max-height: 158px;
              }
            }
            .progress-box {
              width: 100%;
              position: absolute;
              bottom: 0;
              ::v-deep(.el-progress-bar__outer) {
                border-radius: 0;
              }
              ::v-deep(.el-progress-bar__inner) {
                border-radius: 0;
              }
            }
            .play-button-box {
              width: 40px;
              height: 40px;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              background-color: rgba(#fff, 0.6);
              border-radius: 50%;
              cursor: pointer;
              transition: all 0.3s;
              opacity: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              i {
                font-size: 21px;
              }
            }
            .remove-upload {
              color: $white;
              position: absolute;
              right: 5px;
              top: 5px;
              cursor: pointer;
              display: none;
              height: 24px;
              width: 24px;
              background-color: #ff5240;
              box-sizing: border-box;
              border: 1px solid rgba(255, 255, 255, 0.5);
              align-items: center;
              justify-content: center;
              i {
                font-size: 16px;
              }
            }
            &:hover {
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
              border-color: $mainColor;
              background-color: $focusContent;
              .remove-upload {
                display: flex;
              }
              .play-button-box {
                opacity: 1;
              }
            }
          }
        }
      }
      .online-upload {
        padding: 20px;
        .material-choose-box {
          display: flex;
          margin-bottom: 10px;
          .btn {
            padding: 0 15px;
            line-height: 32px;
            height: 32px;
            border-radius: 100px;
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid #c4c9d5;
          }
          .btn.is-active {
            background-color: $mainColor;
            border-color: $mainColor;
            color: $white;
          }
        }
        .online-upload-list-outer {
          height: 425px;
          width: 100%;
          border: 1px solid $borderColor;
        }
        .online-upload-list {
          display: flex;
          flex-wrap: wrap;
          height: 375px;
          .online-upload-item {
            border: 1px solid #e4e4e4;
            height: 160px;
            width: 160px;
            background-color: $backBase;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
            margin-top: 20px;
            cursor: pointer;
            box-sizing: border-box;
            transition: all 0.3s;
            position: relative;
            .upload-item-checkbox {
              position: absolute;
              height: 24px;
              width: 24px;
              box-sizing: border-box;
              border: 1px solid #dcdfe6;
              top: 5px;
              left: 5px;
              background-color: $white;
              display: none;
              transition: all 0.2s;
              align-items: center;
              justify-content: center;
              i {
                font-weight: bold;
                font-size: 18px;
                color: $white;
              }
            }
            img {
              max-width: 100%;
              max-height: 100%;
            }
            &:nth-child(5n + 1) {
              margin-left: 20px;
            }
            &.is-choose {
              .upload-item-checkbox {
                display: flex;
                background-color: #2cbf77;
                border-color: #2cbf77;
              }
            }
            &:hover {
              background-color: $focusContent;
              border-color: $hoverColor;
              box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
              .upload-item-checkbox {
                display: flex;
              }
            }
          }
        }
        .chose-img {
          margin-top: 25px;
          .chose-img-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            p {
              span {
                color: #2cbf77;
              }
            }
          }
          .material-chose-list {
            height: 120px;
            background-color: $focusContent;
            padding: 0 40px;
            .inner-material-chose-list {
              display: flex;
              align-items: center;
              height: 120px;
              width: 100%;
              .material-chose-list-item {
                transition: all 0.2s;
                height: 96px;
                width: 96px;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: $backBase;
                border: 1px solid #e4e4e4;
                flex-shrink: 0;
                margin-right: 10px;
                img {
                  max-height: 100%;
                  max-width: 100%;
                }
                .remove-btn {
                  color: $white;
                  position: absolute;
                  right: 5px;
                  top: 5px;
                  cursor: pointer;
                  display: none;
                  height: 24px;
                  width: 24px;
                  background-color: #ff5240;
                  box-sizing: border-box;
                  border: 1px solid rgba(255, 255, 255, 0.5);
                  align-items: center;
                  justify-content: center;
                  i {
                    font-size: 16px;
                  }
                }
                &:hover {
                  background-color: $focusContent;
                  border-color: $hoverColor;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                  .remove-btn {
                    display: flex;
                  }
                }
                &:nth-last-child(1) {
                  margin-right: 0;
                }
              }
            }
          }
        }
      }
      .inter-upload {
        padding: 20px;
        p.inter-upload-tips {
          margin-bottom: 20px;
          font-size: 14px;
          color: #333333;
        }
        .inter-upload-list {
          .inter-upload-list-title {
            height: 54px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #333333;
            .title-left {
              font-size: 16px;
            }
            .title-right {
              font-size: 14px;
              span.primary-num {
                color: $mainColor;
              }
            }
          }
          .inner-inter-upload-list {
            border: 1px solid #e4e4e4;
            li {
              height: 60px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              padding: 0 20px 0 10px;
              & + li {
                border-top: 1px solid #e4e4e4;
              }
              .image-box {
                height: 40px;
                width: 70px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f2f2f2;
                margin-right: 10px;
                img {
                  max-width: 100%;
                  max-height: 100%;
                }
              }
              p.url {
                flex: 1;
                font-size: 14px;
                @include textEllipsis(18px, 1);
              }
              p.url-warning {
                color: $warningColor;
              }
              .success,
              .warning {
                font-size: 18px;
                margin-right: 10px;
              }
              .success {
                color: $successColor;
              }
              .warning {
                color: $warningColor;
              }
              .delete-btn {
                display: flex;
                height: 24px;
                width: 24px;
                align-items: center;
                justify-content: center;
                color: #ffffff;
                border-radius: 2px;
                background-color: rgba(#333, 0.5);
                &:hover {
                  background-color: $failColor;
                }
              }
            }
          }
        }
      }
      .video-preview {
        padding: 20px 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  transition: opacity 0.5s ease;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
}
</style>
